import { createApp, h } from 'vue';
import Dialog from './Dialog.vue'
export const openDialog = (options) => {
  const {title, content, ok, cancel} = options

  // 防止直接覆盖掉body原先的内容,所以在body下面新建一个div来挂载dialog
  const div = document.createElement('div')
  document.body.appendChild(div)

  const app = createApp({
    render() {
      return h(
        Dialog, 
        { // 传给该dom的参数
          visible: true,
          'onUpdate:visible': newVisible => { // visible写死了true,直接关闭不了
            if (!newVisible) {
              app.unmount()
              div.remove()
            }
          },
          ok, cancel
        },
        { // 插槽的内容
          title,content
        }
        )
    }
  })
  app.mount(div)
}